<template>
    <div>
        <Row :gutter="10">
            <Col span="8" v-for="item in liveVideoList">
                <Card>
                    <p slot="title" style="height: 60px">
                        <Row type="flex" justify="space-between" class="code-row-bg">
                            <Col span="6" class="lab_centent">
                            <div>
                                <label style="margin-right: 5px" @click="sendBadNews(-2,item.info)">警告:<Icon type="alert-circled" size="28px" color="yellow"></Icon></label>
                                <label @click="sendBadNews(-1,item.info)">停播:<Icon type="unlocked" size="28px" color="red"></Icon></label>
                            </div>
                            </Col>
                            <Col span="6" class="lab_centent">
                            <div>房间号:{{item.liveId}}号</div>
                            </Col>
                            <Col span="6" class="lab_centent">
                            <div><label class="nei_model">* </label>观看人数:{{item.info.watchNum}}人</div>
                            </Col>
                            <Col span="6" class="lab_centent">
                            <div><label class="nei_model">* </label>在线人数:{{item.info.onLine}}人</div>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-between" class="code-row-bg typeHan">
                            <Col span="6" class="lab_centent">
                            <div>
                                类型:
                                <label  v-if="item.info.type==1">普通房</label>
                                <label  v-if="item.info.type==2">收费房</label>
                                <label  v-if="item.info.type==3">密码房</label>
                            </div>
                            </Col>
                            <Col span="6" class="lab_centent">
                            <div><label class="nei_model">* </label>标题:{{item.info.title}}</div>
                            </Col>
                            <Col span="6" class="lab_centent">
                            <div><label class="nei_model">* </label>头像:<Avatar class="avatar_img" :src=item.info.avatar size="small"/></div>
                            </Col>
                            <Col span="6" class="lab_centent">
                            <div><label class="nei_model">* </label>性别:<Icon type="woman" size="24px" color="red" v-if="item.info.sex==0"></Icon>
                                <Icon type="man" v-if="item.info.sex==1" size="24px" color="blue"></Icon></div>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-between" class="code-row-bg">
                            <Col span="8" class="lab_centent">
                            <div><label class="nei_model">* </label>主播ID:{{item.info.anchorId}}</div>
                            </Col>
                            <Col span="8" class="lab_centent">
                            <div><label class="nei_model">* </label>主播等级:至尊 {{item.info.level}} 级</div>
                            </Col>
                            <Col span="8" class="lab_centent">
                            <div><label class="nei_model">* </label>城市:{{item.info.city}}</div>
                            </Col>
                        </Row>
                    </p>
                    <div class="player">
                        <video-player  ref="videoPlayer" class="vjs-custom-skin" :options="item.info.playerOptions"></video-player>
                    </div>
                </Card>
            </Col>
        </Row>
        <Page :total="total" :current="page" :page-size="pageSize" @on-change="onCurrentChange" style="text-align: center"></Page>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                tipeNews:'暂无数据',
                selectLiveJankongURl:'/live/jiankong',
                sendBadNewsURl:'/live/jk',
                liveVideoList:[],
                total:0,
                pageSize:0,
                page:1,
                playerOptions:{
                    sources: [{
                        type: "rtmp/mp4",
                        src: "",
                        withCredentials: false
                    }],
                    techOrder: ['flash'],
                    language: 'zh-CN',
                    autoplay: true,
                    controls: true,
                    progressControl:false,
                    height: 260
                },
            }
        },
        created () {
            this.getData();
        },

        methods: {
            //初始化时获取数据
            getData () {
                let self = this;
                self.$axios.get(self.selectLiveJankongURl + '?curr=' + self.page).then((res) => {
                    let play = self.playerOptions;
                    for (var i = 0; i < res.data.data.rows.length; i++) {
                        play.sources[0].src = res.data.data.rows[i].info.pullUrl;
                        res.data.data.rows[i].info.playerOptions = play;
                    }
                    self.liveVideoList = res.data.data.rows;
                    self.page = res.data.data.page;
                    self.pageSize = res.data.data.pagesize;
                    self.total = res.data.data.total;
                })
            },
            sendBadNews(e,model){
                let self=this;
                if (e == -1){
                    self.$axios.post(self.sendBadNewsURl+'?anchorId='+model.anchorId+'&type=-1').then((res) => {
                        if (res.data.code==200){
                            self.$Message.success('恭喜您，停播成功');
                            self.getData();
                        }else {
                            self.$Message.error('抱歉，停播失败。请稍后重试!');
                            self.getData();
                        }
                    })
                }else if(e == -2){
                    self.$axios.post(self.sendBadNewsURl+'?anchorId='+model.anchorId+'&type=-2').then((res) => {
                        if (res.data.code==200){
                            self.$Message.success('恭喜您，警告成功');
                            self.getData();
                        }else {
                            self.$Message.error('抱歉，警告失败。请稍后重试!');
                            self.getData();
                        }
                    })
                }

            },
            onCurrentChange(val){
                let self = this;
                self.page = val;
                self.getData();
            },
        },

    }
</script>
<style>
    .lab_centent{
        text-align: center;
        color: #495060;
        font-size: 12px;
    }
    .ivu-card-bordered{
        margin-bottom: 10px;
    }
    .typeHan{
        display: flex;
        align-items: center;
    }
    .avatar_img{
        vertical-align: middle;
    }
</style>